DAY21 404Error!!!怎麼連結錯誤網頁

2024 iThome 鐵人賽

DAY 21

佛心分享-IT 人自學之術

一個網頁的誕生！教你從基礎到自行完成設計網站系列第 21 篇

16th鐵人賽

Corrina

2024-10-05 16:12:05

172 瀏覽

分享至

延續前一天完整完整的網頁需求如下：

6. 錯誤處理

處理使用者的錯誤操作或系統錯誤，以提供良好的使用者體驗。例如：

提供友好的 404 錯誤頁面，提示用戶頁面不存在並引導他們返回首頁。
使用 JavaScript 檢查表單輸入是否正確，避免提交錯誤資料。

7. 測試

跨瀏覽器測試：確保網站在各種瀏覽器（如 Chrome、Firefox、Safari 等）中顯示一致。
跨裝置測試：測試網站在桌機、手機和平板等不同裝置上的顯示效果。

8. 文件結構

保持整潔的文件和資源結構，便於維護和更新。例如，將所有 CSS 文件放在 css/ 資料夾，所有圖片放在 images/ 資料夾中。

那幹嘛要連到錯的網路啊⋯⋯因為呢！我們網址輸錯或網路跑不動有時候都會跑出404對吧～那今天來寫如何連到那個連結！有一些404的網頁也會蠻好看的～是因為有做一些進階功能。也是錯誤處理的方式。

🌟導入自訂的 404 錯誤頁面，可以按照以下步驟操作。這將確保當使用者訪問不存在的頁面時，能夠看到友善的錯誤提示，而不是瀏覽器預設的錯誤訊息。

1. 建立 404.html 文件

首先，建立一個名為 404.html 的文件，並設計您希望使用者看到的錯誤頁面內容。以下是一個簡單的範例：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>頁面未找到 - 404</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f8f8f8;
        }
        h1 {
            font-size: 50px;
            color: #333;
        }
        p {
            font-size: 20px;
            color: #666;
        }
        a {
            color: #007BFF;
            text-decoration: none;
            font-size: 18px;
        }
        a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>抱歉，您訪問的頁面不存在。</p>
    <p><a href="index.html">返回首頁</a></p>
</body>
</html>